<template>
  <global-header></global-header>
  <div style="padding-top: 70px;">
    <img src="../assets/news-banner.jpg" style="width: 100%;height: auto;" >
  </div>
  <div class="home">
    <div class="container">
      <div style="width: 100%;display: flex;align-items: center;justify-content : space-between;">
        <div class="species-tab">
          <div :class='currentData == 0 ? "species-tab-select" : "species-tab-text"' @click="bindchangeTab(0)">
            糯米糍
          </div>
          <div :class='currentData == 1 ? "species-tab-select" : "species-tab-text"' @click="bindchangeTab(1)">
            桂味
          </div>
          <div :class='currentData == 2 ? "species-tab-select" : "species-tab-text"' @click="bindchangeTab(2)">
            妃子笑
          </div>
        </div>
        <div v-if="currentData == 0" style="width: 80%;height: 450px;background-color: wheat;transition: box-shadow 0.3s, transform 0.3s;">
          000
        </div>
        <div v-if="currentData == 1" style="width: 80%;height: 450px;background-color: #2c3e50;transition: box-shadow 0.3s, transform 0.3s;">
          111
        </div>
        <div v-if="currentData == 2" style="width: 80%;height: 450px;background-color: red;transition: box-shadow 0.3s, transform 0.3s;">
          222
        </div>
      </div>



      <div style="padding: 60px 0;text-align: left;border-top: 1px solid #333;margin-top: 50px;">
        <div style="display: flex;justify-content : space-between;flex-wrap: wrap;">
          <div style="width: 45%;">
            <div style="width: 100%;height: 600px;overflow: hidden;">
              <img src="../assets/01f33560c076f911013eaf70ac9b67.webp" style="width: 100%;height: 100%;object-fit: cover;transition: 0.5s all;">
            </div>
          </div>

          <div style="width: 44%;font-family: 'Fira Code';">
            <h2 style="font-size: 40px;color: #000;">品牌简介</h2>
            <div style="margin: 50px 0 20px 0;">
              <p style="font-weight: 700;font-size: 21px;">厚街荔枝</p>
            </div>
            <div style="font-size: 14px;font-family: 'Fira Code';">
              <div>厚街荔枝以品质佳、无公害、绿色等特点，在全市、全省乃至全国荔枝产业中占据一席之位，屡次斩获全国荔枝擂台赛金银铜奖。</div>
              <div style="margin-top: 20px;">厚街荔枝种植面积约35000亩，是东莞市种植荔枝面积最大的镇，产地主要集中在新围、大迳、桥头、河田、汀山、赤岭等17个社区。其中，将近7成的荔枝集中在新围和大迳两个社区。</div>
            </div>


          </div>


        </div>
      </div>



    </div>
  </div>
</template>

<script>
import GlobalHeader from "@/components/page/GlobalHeader";
import ThreeTest from "@/views/ThreeTest.vue";

export default {
  name: "HomeView",
  components: {
    GlobalHeader,
    ThreeTest
  },
  data() {
    return {
      currentData: 0
    }
  },
  methods: {
    bindchangeTab: function (index) {
      if (this.currentData == index){
        return
      }
      this.currentData = index;
    },
  }
};
</script>
<style>
body {
  margin: 0;
  font-size: 16px;
}

.home {
  padding: 20px 0;
}

.container {
  max-width: 1200px;
  margin-right: auto;
  margin-left: auto;
}

.species-tab {
  width: 10%;
  text-align: center;
}

.species-tab-select {
  transition: all ease-out 0.3s;
  box-shadow: 4px 6.928px 15px 0px #262626;
  background-image: -webkit-linear-gradient(180deg, #262626 0%, #616161 100%);
  padding: 8px 25px;
  color: #fff;
  margin-bottom: 40px;
}

.species-tab-text:hover {
  transition: all ease-out 0.3s;
  box-shadow: 4px 6.928px 15px 0px #262626;
  background-image: -webkit-linear-gradient(180deg, #262626 0%, #616161 100%);
  padding: 8px 25px;
  color: #fff;
}

.species-tab-text {
  /*border: 1px solid #b2b2b2;*/
  transition: all ease-out 0.3s;
  margin-bottom: 40px;
  padding: 8px 25px;
  cursor: pointer;
}

</style>
